<!DOCTYPE html>
<html lang="en">

<head>

    <title>意见反馈</title>
    <!-- <link rel="stylesheet" href="css/contact.css" type="text/css" media="screen"> -->
    <style>
        .focus {
            background-color: rgba(88, 132, 226, 0.3);
            width: 50%;
            padding: 5px;
            border-radius: 12px 0 0 12px;
            border: rgba(88, 132, 226, 0.3) solid 2px;
        }
        
        .focus-change {
            color: skyblue;
            background-color: white;
        }
        
        .con-input {
            width: 80%;
            line-height: 40px;
            border-radius: 12px;
            background-color: rgba(128, 128, 128, 0.1);
            text-align: center;
            margin-bottom: 10px;
        }
        
        .con-input:hover {
            transform: scale(1.1);
        }
    </style>

</head>

<body>
    <!-- nav固定——position: sticky; top:0;-->
    <nav style="width: 100%; position: sticky;top:0;padding:10px 0 0 230px;z-index: 999;background-color: white;">
        <img src="employee/images/subscribe-icon.png" style="margin-right: 20px;height: 35%;">
        <h2 style="display: inline-block;position: relative;top: -20px;color: grey;">向我们提出宝贵意见吧！</h2>
        <h4 onclick="javascript:history.go(-1)" style="display: inline-block;position: relative;right: 100px;color: white;background-color: rgb(88, 132, 226);padding: 10px;border-radius: 12px;left: 500px;top: -20px;">go back</h4>
    </nav>
    <header style="width: 100%">
        <img src="employee/images/contact-bg.jpg" style="width:100% ;opacity: 80%;">
    </header>
    <section style="background-color:rgba(128,128,128,0.1);padding: 30px 230px 500px 230px;">
        <div class="left1" style="width: 50%;height:50px;position: relative;background-color: white;border-radius: 12px;display:flex;flex-direction: row;">
            <div id="div2" class="focus">社区</div>
        </div>
        <div id="left2-2" style="width: 50%;height: 500px;position: relative;top:10px;background-color: white;padding-top: 30px;border-radius: 12px;text-align: center;">
            <input type="text" value="界面简约好看，喜欢！" disabled="true" class="con-input" onclick="javascript:history.go(-1)">
            <input type="text" value="后台数据准确无误，喜欢！" disabled="true" class="con-input" onclick="javascript:history.go(-1)">
            <input type="text" value="界面简约好看，喜欢！" disabled="true" class="con-input" onclick="javascript:history.go(-1)">
            <input type="text" value="后台数据准确无误，喜欢！" disabled="true" class="con-input" onclick="javascript:history.go(-1)">
        </div>


        <div class=" right " style="width: 30%;height: 100px;position: relative;left: 55%;top:-580px;background-color: white;border-radius: 12px;text-align: center;line-height: 100px; ">
            <button style="background-color:rgba(88, 132, 226,0.3);width: 80%;height: 30px;border-radius: 12px; " onclick="changefocus() ">说两句</button>
        </div>

        <div style="position: relative;left:500px;top: -550px;width: 30%;">
            <div class="left1" style="width: 100%;height:50px;position: relative;background-color: white;border-radius: 12px;display:flex;flex-direction: row;">
                <div id="div1" class="focus" style="border-radius:0 12px  12px 0;position: relative;left: 120px;">我的</div>
            </div>
            <div id="left2-1" style="width: 100%;height: 370px;position: relative;top:10px;background-color: white;padding-top: 30px;border-radius: 12px;text-align: center;">
                <textarea id="con-text" type="text" name="my" placeholder="在这里写下你要说的话……" style="width: 80%;height: 200px;border-radius:12px;background-color: rgba(128,128,128,0.1);"></textarea>
                <button style="background-color:rgba(88, 132, 226,0.3);width: 30%;padding: 5px;border-radius: 12px;display: block;margin: 10px 25px;" onclick="javascript:history.go(-1)">提交</button>
            </div>
        </div>
    </section>


    <script type="text/javascript ">
        function changefocus() {
            document.getElementById('con-text').focus();
        }
    </script>
    <!-- <script type="text/javascript">
        function changeColor(obj) {

            obj.style.background = 'rgba(88, 132, 226,0.1)';

        }
    </script> -->
</body>

</html>